<template>
  <!-- 单体温度监控 -->
  <div class="chartContent">
    <a-form :model="form" layout="inline" ref="formRef" class="chartForm">
      <a-form-item label="选择月份">
        <a-range-picker
          v-model:value="form.month"
          value-format="YYYY-MM"
          format="YYYY-MM"
          picker="month"
          :allowClear="false"
        />
      </a-form-item>

      <a-button type="primary" class="filterBtn" @click="getAttenuation"
        >查询</a-button
      >
    </a-form>
    <a-spin :spinning="chartLoading">
      <div
        id="attenuationChart"
        class="chartContainer"
        v-if="markData.length"
      />
      <a-empty v-else style="opacity: 0.5; margin-top: 50px" />
    </a-spin>
  </div>
</template>
<script setup>

import { commonConfigStore } from "@/stores/commonConfig"
import * as echarts from "echarts"
import { getTemperatureOption } from "./chartOption"
import { getCurrentDate, getYesterdayFromDate } from "@/utils/common"
import { random } from "lodash-es"

import moment from "moment"
const chartLoading = ref(false)
const props = defineProps({
  stationInfo: {
    type: Object,
  },
})
const $api = inject("$api")
const form = ref({
  month: [],
})
watch(
  () => props.stationInfo,
  (newVal) => {
    if (newVal) {
      form.value.month = [
        moment(newVal.operateDate).format("YYYY-MM"),
        moment().format("YYYY-MM"),
      ]
    }
  },
  { immediate: true }
)
//先获取开始时间（与后端协商好这么做的）

const getTimeList = async () => {
  const res = await $api.thermalDecay({
    stationId: props.stationInfo.id,
    startDate: moment(props.stationInfo.operateDate).format("YYYY-MM"),
    endDate: moment().format("YYYY-MM"),
  })
  if (res?.code === 0) {
    if (res?.data.length > 0) {
      form.value.month = [res.data[0].date, moment().format("YYYY-MM")]
    }
    /* timeList.value = res.data
    form.value.date = timeList.value[0] */
  }
  getAttenuation()
}
const markData = ref([])
const getAttenuation = async () => {
  const res = await $api.thermalDecay({
    stationId: props.stationInfo.id,
    startDate: form.value.month.length ? form.value.month[0] : "",
    endDate: form.value.month.length ? form.value.month[1] : "",
  })
  if (res?.code === 0) {
    markData.value = res.data
    organizeData()
  }
}

const maxChartOptionData = ref({})
const organizeData = async () => {
  maxChartOptionData.value = getTemperatureOption()
  // const markData = {
  //   //真实SOH
  //   realSOHList: [
  //     {
  //       date: "2024-2",
  //       realSOH: 10.0,
  //     },
  //     {
  //       date: "2024-3",
  //       realSOH: 20.0,
  //     },
  //     {
  //       date: "2024-4",
  //       realSOH: 30.0,
  //     },
  //     {
  //       date: "2024-5",
  //       realSOH: 40.0,
  //     },
  //   ],
  //   //标称SOH
  //   nominalSOH: 20.0,
  // }
  maxChartOptionData.value.xAxis.data = markData.value.map((item) => item.date)
  maxChartOptionData.value.series[0].data = markData.value.map(
    (item) => item.realSOH
  )
  maxChartOptionData.value.series[1].data = markData.value.map(
    (item) => item.nominalSOH
  )
  const allChartOption = [
    ...maxChartOptionData.value.series[0].data,
    ...maxChartOptionData.value.series[1].data,
  ].filter((item) => item !== null)
  let minValue =
    allChartOption.length > 0
      ? allChartOption.reduce((min, current) => (current < min ? current : min))
      : null
  maxChartOptionData.value.yAxis.min = minValue
    ? Math.floor(minValue / 10) * 10
    : 0
  await nextTick()
  const chartEl = document.getElementById("attenuationChart")
  if (chartEl) {
    const chartInstance = echarts.init(chartEl)
    chartInstance.resize()
    chartInstance.clear()
    chartInstance.setOption(maxChartOptionData.value)
  }
}
const handleChageStation = async () => {
  form.value.date = getCurrentDate()
  await getTimeList()
  //await getAttenuation()
}
defineExpose({ handleChageStation })
</script>

<style lang="less" scoped>
.chartForm {
  margin-top: 20px;
}
.ant-form-item {
  margin-bottom: 20px;
}
.chartContainer {
  margin-bottom: 20px;
  width: 100%;
  height: 400px;
  border-radius: 4px;
}
.chartContent {
  overflow-y: scroll;
  height: calc(100vh - 250px);
}
.formInput {
  width: 180px;
}
</style>
